<script setup>
import {ref} from "vue";
const count = ref(0)

const sampleDataLeft = ref([{
  title: "计量的定义",
  content: "在现代，计量的科学内涵远远超出“度量衡”的内容。计量的定义是测量及其应用的科学，是实现单位统一、保证量值准确可靠的活动。准确性、一致性、溯源性和法制性是计量最重要的四个特征。",
  expanded: false
},
{
  title: "计量的作用是什么",
  content: "计量关系国计民生，像空气一样，与人类生产生活紧密相连。计量是科技创新的种子、社会进步的基石，是创造质量和控制质量的重要物质手段，是保证国民经济正常运行和公平贸易的基础，也成为国家核心竞争力的重要标志之一。毫无疑问，计量支撑发展，质量成就未来。",
  expanded: false
}, {
  title: "计量的未来展望",
  content: "测量不确定度是表征合理地赋予被测量值的分散性，与测量结果相联系的参数。",
  expanded: false
}, {
  title: "企业如何建立计量器具管理台账以及开展检定、校准工作？",
  content: "企业需要掌握了解计量器具分为强制检定、非强制检定和校准的基本概念，根据不同概念的检定、校准要求建立计量器具管理台账。台账中的具体内容应包括：计量器具名称、规格型号、编号、测量范围、检定或校准时间、检定或校准周期等。另外嘉峪检测网提醒还要明确是送检还是现场检定或校准、确定检定或校准单位以及其他相关内容。通过完善计量器具管理台账，可以对企业在用计量器具的工作状态一目了然。把不同要求的计量器具分类建立台账，按照不同分类做好计量器具的管理工作。",
  expanded: false
}]);
const sampleDataRight = ref([{
  title: "什么是测量不确定度？",
  content: "以“计量基准量子化”和“量值传递扁平化”为主要特征的国际计量变革，将完美契合以信息物理融合系统为基础的第四次工业革命的开启。一是基于量子物理的新一代国际单位制；二是突破极限的测量，从原子尺度到超大尺寸范围内的测量，在极端条件下的测量、在干扰或快速变化环境中的测量；三是智能和互联式测量，实现物联网大量的仪器仪表或传感器的在线、远程及扁平化量值溯源；四是嵌入式测量，将计量植入到生产过程，将最精准的计量基标准融入到机器。",
  expanded: false
}, {
  title: "为什么部分计量器具可以上门检定、部分计量器具必须送检？",
  content: "如果计量标准器具便于携带，或者一般大型计量器具或受搬动会影响的精密仪器，在现场环境可以满足检定要求的情况下可以采用上门检定。一般情况下，计量器具的检定活动都是在技术规范要求的恒温、恒湿等环境下开展，需要送至计量技术机构实验室进行。",
  expanded: false
}, {
  title: "实行强制检定的计量器具包括哪些？",
  content: "根据《计量法》第九条，实行强制检定的计量器具包括3大类：一是社会公用计量标准器具；二是部门和企业、事业单位使用的最高计量标准器具；三是列入国家市场监督管理总局发布的《实施强制管理的计量器具目录》中实施强制检定且用于贸易结算、安全防护、医疗卫生、环境监测4各方面的工作计量器具。所以，实行强制检定的计量器具不是只有工作计量器具，还有计量标准器具。\n" + " 参见：实施强制管理的计量器具目录",
  expanded: false
}, {
  title: "如何确定非强制检定计量器具的检定或校准周期？",
  content: "根据计量器具的实际使用情况，本着科学、经济和量值准确的原则确定非强检计量器具检定或校准周期。应注意的几个方面：一是不得使用未经检定、校准的计量器具；二是不要刻意去延长检定或校准周期，应参照检定规程或校准规范的规定；三是必须依靠专业计量技术机构的指导或由生产企业出具建议",
  expanded: false
}
]);

const togglePanelLeft = (index) => {
  sampleDataLeft.value.forEach((item, i) => {
    if (i == index) {
      // 切换当前面板状态
      item.expanded = !item.expanded;
    }
    else {
      // 关闭其他面板
      item.expanded = false;
    }
  });
}

const togglePanelRight = (index) => {
  sampleDataRight.value.forEach((item, i) => {
    if (i == index) {
      // 切换当前面板状态
      item.expanded = !item.expanded;
    }

    else {
      // 关闭其他面板
      item.expanded = false;
    }
  });
}
</script>

<template>
  <div class="box-qa">
    <img class="quaereTitle" src="@/assets/images/quaereTitle.png" alt="">
    <h3>解决您更多问题</h3>
<!--    <h2>问题&解答</h2>-->
    <div style="overflow: hidden">
      <div class="box9-data">
        <div style="float:left">
          <div class="box9-data-info" v-for="(item, index) in sampleDataLeft" :key="index">
            <div class="box9-data-title" @click="togglePanelLeft(index)">
              <h5>{{ item.title }}</h5>
              <span></span>
            </div>
            <p v-if="item.expanded">{{ item.content }}</p>
          </div>
        </div>
        <div style="float:left">
          <div class="box9-data-info" v-for="(item, index) in sampleDataRight" :key="index">
            <div class="box9-data-title" @click="togglePanelRight(index)">
              <h5>{{ item.title }}</h5>
              <span></span>
            </div>
            <p v-if="item.expanded">{{ item.content }}</p>
          </div>
        </div>
      </div>

    </div>

  </div>
</template>

<style scoped>
.box-qa{
  background: radial-gradient(26.69% 61.72% at 16.28% 56.28%, #E8F5FF 0%, rgba(255, 255, 255, 0) 100%);
  h3{
    font-size: 22px;
  }
  .box9-data{
    width: 1400px;
    margin: 80px auto;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    overflow: hidden;
    .box9-data-info{
      width: 685px;
      padding: 15px;
      font-size: 18px;
      box-shadow: 0px 8px 10px 0px #D9D9D973;
      margin-bottom:30px ;
      border-radius: 6px;
      background: white;
      overflow: hidden;
      transition: all 0.4s ease;


      .box9-data-title{
        display: flex;
        justify-content: space-between;
        transition: background 0.3s ease;
        margin-bottom: 20px;
        cursor: pointer;

        h5{
          color: #000;
          font-size: 18px;
        }
        span{
          display: block;
          width:17px;
          height: 26px;
          background: url(@/assets/images/upIcon.png) no-repeat;
          background-size: 100% 100%;
          margin-right: 10px;
        }
      }
      .box9-data-title:hover {
        color: #3167FF;
      }
      p{
        transition: all 0.4s ease;
        text-align: left;
        font-size: 18px;
        color: #666;
      }
    }
    .box9-data-info:hover {
      transform: translateY(-5px);
      box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
    }
  }

}
.quaereTitle{
  width:442px;
  height: 66px;
  margin-bottom:  26px;
}

</style>